<template>
  <div>
    <h1>商品</h1>
    <div class="bar1">
      <div class="item1" @click="go('/product/hotProduct')">热门商品</div>
      <div class="item1" @click="go('/product/newsProduct')">最新商品</div>
    </div>
    <div>
       <!-- 二级路由出口 -->
       <router-view></router-view>
    </div>
  </div>
</template>

<script lang='ts' setup>
import {useRouter} from 'vue-router'
const router=useRouter()
const go=(path:string)=>{
  router.replace(path)
}
</script>

<style lang='scss' scoped>
.bar1{
  display: flex;
  .item1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 35px;
    background-color: #ccc;
    margin: 5px;
  }
}
</style>